<template>
  <div>News</div>
  <button @click="toDetail('娱乐')">娱乐新闻</button>
  <button @click="toDetail('体育')">体育新闻</button>
  <button @click="toDetail('军事')">军事新闻</button>
  <button @click="toDetail('政治')">政治新闻</button>
  <button @click="toDetail('花边')">花边新闻</button>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'News'
})
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
// useRouter
//返回router实例，相当于在模板中使用$router，必须在setup中使用
const router = useRouter()
const toDetail = (type: string) => {
  router.push({
    name: "Detail",
    params: {
      type
    }
  })
}
</script>

<style lang="less" scoped>

</style>